<script setup>
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {RULE} from "../../../const/index.js";
import {reactive, ref} from "vue";
import {insertApi} from "../../../api/axios.js";
import {orderStateFormat, seckillStatusFormat} from "../../../util/project.js";
import {ORDER_STATUS_OPTIONS, SECKILL_STATUS_OPTIONS} from "../../../const/project.js";

/*======================================页面常量=============================================================*/
// 路径导航
const navItems = [
  {icon: 'Order', label: '订单管理'},
  {icon: 'Flag', label: '订单列表', url: '/Order'},
  {icon: 'Flag', label: '添加订单'},
];

/*======================================添加表单=============================================================*/
// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '购买人ID', prop: 'fkUserId', required: true, width: 80, sortable: true, span: 12},
  {label: '订单总价', prop: 'totalAmount', required: true, width: 80, sortable: true, span: 12},
  {label: '支付总价', prop: 'payAmount', required: true, width: 140, sortable: true, span: 12},
  {label: '订单状态', prop: 'status', required: true, width: 30, sortable: true, span: 12,type: 'select', options: ORDER_STATUS_OPTIONS},
  {label: '订单描述', prop: 'info', required: true, type: 'card', tooltip: false, span: 12},
  {label: '优惠卷ID', prop: 'fkCouponsId', required: true, width: 80, sortable: true, span: 12},


]);
let data = reactive({info: '暂无描述'});
let rules = {info: RULE.INFO};

/**
 * 添加成功后调用
 * 1. 路由到 User 页面
 */
function insertSuccess() {
  router.push('/Order');
}
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card class="order-insert-card" header="添加订单">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :args="{module: 'order'}"
             :api="insertApi"
             :params="data"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.order-insert-card {
  width: 70%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>